<script setup lang="ts">
import { skillNewsGetById } from "~/api/headlines";
import { formatDate } from "~/utils/func";

useSeoMeta({
  title: "头条详情 - 技能猴子",
  ogTitle: "头条详情 - 技能猴子",
  description: "技能猴子，找技能服务，我喜欢和技能人才直接聊",
  ogDescription: "技能猴子，找技能服务，我喜欢和技能人才直接聊",
});

const html = ref("");

const route = useRoute();
onMounted(() => {
  const id = route.query.id;
  if (id !== undefined) {
    getDetails(id);
  }
});
const details = ref({});
const getDetails = async (id: string | number) => {
  try {
    const data = await skillNewsGetById({
      id,
    });
    details.value = data.data;
  } catch (e) {
    console.log(e);
  }
};

useHead({
  title: computed(() => {
    if (details.value.title) {
      return details.value.title + " - 技能猴子";
    }
    return "头条详情 - 技能猴子";
  }),
});
</script>

<template>
  <div class="body">
    <BaseHeaderMenuWhite bgColor="white" />
    <div class="new-page" v-if="details.title">
      <h4>{{ details.title }}</h4>
      <p class="time">{{ formatDate(details.createTime).substring(0, 16) }}</p>
      <div v-html="details.content"></div>
    </div>
    <div class="new-page" v-else>
      <el-skeleton :rows="9" animated>
        <template #template>
          <el-skeleton-item variant="h1" style="width: 50%" />
          <p style="margin-top: 10px">
            <el-skeleton-item variant="h3" style="width: 100px" />
          </p>
          <p style="margin-top: 20px">
            <el-skeleton-item variant="p" style="width: 100%" />
          </p>
          <p style="margin-top: 5px">
            <el-skeleton-item variant="p" style="width: 100%" />
          </p>
          <p style="margin-top: 5px">
            <el-skeleton-item variant="p" style="width: 100%" />
          </p>
          <p style="margin-top: 10px">
            <el-skeleton-item variant="p" style="width: 40%" />
          </p>
          <p style="margin-top: 5px">
            <el-skeleton-item variant="p" style="width: 100%" />
          </p>
          <p style="margin-top: 5px">
            <el-skeleton-item variant="p" style="width: 100%" />
          </p>
          <p style="margin-top: 5px">
            <el-skeleton-item variant="p" style="width: 50%" />
          </p>
        </template>
      </el-skeleton>
    </div>
  </div>
  <BaseFooter />
</template>

<style scoped lang="scss">
.body {
  background: #f9f9f9;
  min-height: calc(100vh - 400px);
  padding-top: 80px;
  padding-bottom: 50px;
}
.new-page {
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  background: #ffffff;
  width: 1100px;
  margin: 32px auto 0;
  padding: 24px;
  box-sizing: border-box;
}
h4 {
  font-size: 24px;
  color: #191e28;
  margin-bottom: 12px;
}
.time {
  color: rgba(25, 30, 40, 0.36);
  margin-bottom: 20px;
}
</style>

<style lang="scss">
.new-page img {
  max-width: 100%;
}
</style>
